
import * as React from 'react';

import { Layout, Skeleton,Card, List  } from 'antd';

const { Header, Content, Sider} = Layout;
import WriteMail from '../../components/WriteMail';
import QueueAnim from 'rc-queue-anim';
interface Props{
   style?: object 
   header?: any,
   loading?: boolean
}
class Page extends React.Component<Props> {
    state = {
      showDrawer: false,
    }
    static defaultProps ={
      style: {}
    }
    Skeleton = (
      <div style={{paddingTop: 17,position:'absolute', width:'100%'}} key={1}>
        <Skeleton paragraph ={{rows: 1, width:100}} active title={false}/>
        <List dataSource={[1,2,4,5,6,7,8,9,0,1,1,1,1]} renderItem={(item, index) =>
          <QueueAnim key={index} delay={index * 80} animConfig={[{ opacity: [1, 0], translateY: [0, 30] }]}style={{marginBottom:1}}>
            <List.Item key = {index}style={{background:'#fff', padding: '15px 20px 5px 20px'}}>
              
                <Skeleton key ={index} active paragraph={{rows: 1, width: (Math.random() * 100) / 2 +50+ '%'}} title={false}/>
            </List.Item>
          </QueueAnim>
          }>
        </List>
      </div>
      )
    public render () {
        return <Layout style={{ padding: '0 0 0 10px',background: 'none', position:'relative', width: '100%' }} id="content" key={1}>
                  <div key={1}>{this.props.header}</div>
                  <Content key={2} style={{ position: 'relative',background: '#fff', margin: 0, overflowY: 'auto',overflowX: 'hidden', ...this.props.style }} id="container">
    <QueueAnim animConfig={{opacity: [1,0]}} >{this.props.loading ? [1].map(item => this.Skeleton): <div key= {2}>{this.props.children}</div>}</QueueAnim>
                  <WriteMail visible={this.state.showDrawer} onClose={() => {this.setState({showDrawer: false})}} />
                </Content>
            </Layout>
    }
}
export default Page;